<!--
 * @Author: hq_deveolper hz858632@163.com
 * @Date: 2024-10-02 17:05:33
 * @LastEditors: hq_deveolper hz858632@163.com
 * @LastEditTime: 2024-10-03 11:13:16
 * @FilePath: \city-screen\src\views\JieXiangChuiShao\components\ChuiShaoShiXiangTongJi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="area">
        <div class="area-top">街巷吹哨案件类型统计</div>
        <div class="area-main" id="AnJianType"></div>
    </div>
</template>
<script>
import { streetChuiShaoDB } from '@/api/index'
export default {
    data() {
        return {

        }
    },
    mounted() {
        // this.loadEcharts({streetId:undefined,type:undefined})
    },
    methods: {
        async loadEcharts({streetId=undefined,type=undefined}) {
            const res=await streetChuiShaoDB.getStreetOrderType({streetId,type})
            const sum =res.data.map(item=>{return Number(item.num)}).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            let listData=res.data
            listData.forEach(item=>{
                item.value=item.num/sum*100
                item.name=item.type
            })
            var chartDom = document.getElementById('AnJianType');
            var myChart = echarts.init(chartDom);
            var option;


            let index = 0;
            var colorList = ['#52d4c9','#ea707e','#4874cb','#ee822f','#f2ba02','#75bd42','#30c0b4',
            '#e54c5e','#254380','#9e4c0d','#1d736c','#a01727','#6d90d5','#f19b591','#fdcc2c','#91ca68']
            function fun() {
                var timer = setInterval(function () {
                    myChart.dispatchAction({
                        type: 'hideTip',
                        seriesIndex: 0,
                        dataIndex: index
                    });
                    // 显示提示框
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: index
                    });
                    // 取消高亮指定的数据图形
                    myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: index == 0 ? 5 : index - 1
                    });
                    myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: index
                    });
                    index++;
                    if (index > 5) {
                        index = 0;
                    }
                }, 3000)
            }

            fun()
            setTimeout(function () { fun() }, 5000);
            option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['35%', '55%'],
                    clockwise: true,
                    avoidLabelOverlap: true,
                    hoverOffset: 15,
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                let num = params.value.toFixed(2); 
                                return  params.name+`${num}%`
                            },
                            textStyle: {
                                fontSize: 12,
                                color: '#fff'
                            },
                            position: 'outside'
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 30,
                            lineStyle: {
                                width: 1
                            }
                        }
                    },
                    data: listData
                }]
            };

            option && myChart.setOption(option);
        }
    }
}
</script>
<style lang="less" scoped>
.area {
    width: 100%;
    padding: 0px 10px;

    .area-top {
        width: 460px;
        height: 41px;
        background: url(../../../assets/images/jiexiangchuishao/item-cillp.png) no-repeat;
        background-size: 100% 100%;
        margin-left: 50%;
        transform: translate(-50%);
        font-family: ShiShangZhongHeiJianTi;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        padding-left: 15px;
        line-height: 41px;
    }

    .area-main {
        width: 100%;
        height: 255px;
    }
}
</style>